<script setup lang="ts">
import localeStore from '@/store/locale'
import { storeToRefs } from 'pinia'
const router = useRouter()
const breadcrumbData = ref([])

import {
  TwitterOutlined,
  FacebookFilled,
  YoutubeFilled,
  LinkedinOutlined,
  InstagramOutlined,
} from '@ant-design/icons-vue';
const { localeInfo} = storeToRefs(localeStore())
function turnPage(item){
  if(item.path) {
    router.push(item.path)
    breadcrumbChange(item.path)
  }
}

function breadcrumbChange(newValue:any) {
  console.log(newValue.path,1)
  if(newValue.path=='/aboutUs') {
    breadcrumbData.value=localeInfo.value.breadcrumbs.about
  } else if(newValue.path=='/Solutions') {
    breadcrumbData.value=localeInfo.value.breadcrumbs.solutions
  } else if(newValue.path=='/Anesthesia') {
    breadcrumbData.value=localeInfo.value.breadcrumbs.anesthesia
  } else if(newValue.path=='/XRay') {
    breadcrumbData.value=localeInfo.value.breadcrumbs.xRay
  } else if(newValue.path=='/Ultrasound') {
    breadcrumbData.value=localeInfo.value.breadcrumbs.ultrasound
  } else if(newValue.path=='/Endoscopy') {
    breadcrumbData.value=localeInfo.value.breadcrumbs.endoscopy
  } else if(newValue.path=='/Surgerydevices') {
    breadcrumbData.value=localeInfo.value.breadcrumbs.surgerydevices
  } else if(newValue.path=='/ElectrosurgicalUnits') {
    breadcrumbData.value=localeInfo.value.breadcrumbs.electrosurgicalUnits
  } else if(newValue.path=='/Monitorsandpumps') {
    breadcrumbData.value=localeInfo.value.breadcrumbs.monitorsandpumps
  } else if(newValue.path=='/Operationlights') {
    breadcrumbData.value=localeInfo.value.breadcrumbs.operationlights
  } else if(newValue.path=='/Operationtables') {
    breadcrumbData.value=localeInfo.value.breadcrumbs.operationtables
  } else if(newValue.path=='/UltrasonicScalpels') {
    breadcrumbData.value=localeInfo.value.breadcrumbs.ultrasonicScalpels
  } else if(newValue.path=='/Service') {
    breadcrumbData.value=localeInfo.value.breadcrumbs.service
  } else if(newValue.path=='/Supports') {
    breadcrumbData.value=localeInfo.value.breadcrumbs.supports
  } else if(newValue.path=='/Supports16') {
    breadcrumbData.value=localeInfo.value.breadcrumbs.supports16
  } else if(newValue.path=='/Supports17') {
    breadcrumbData.value=localeInfo.value.breadcrumbs.supports17
  }
}
</script>
<template>
  <div class="view_bottom">
    <div class="view_bottom_content">
      <div >
        <p v-for="(item,index) in localeInfo.viewBottomEp.list" :key="index" >
          <span v-if="!item.child"  @click='turnPage(item)'>{{item.name}}</span>
        </p>
        <p class="line"></p>
        <p v-for="(item,index) in localeInfo.viewBottomEp.list" :key="index" @click='turnPage(item)'>
          <span v-if="item.child">{{item.name}}</span>
        </p>
      </div>
      <div>
        <img src="@/assets/img/title_logo.png" alt="">
      </div>
    </div>
    <div class="email_bottom">
      <div>
        <span class="span">{{localeInfo.viewBottomEp.emailInfo.name}}</span>
        <TwitterOutlined  />
        <FacebookFilled />
        <YoutubeFilled />
        <LinkedinOutlined />
        <InstagramOutlined />
      </div>
      <div>
        <span class="span_txt">{{localeInfo.viewBottomEp.emailInfo.txt}}</span>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.view_bottom{
  
  background-color: rgba(247,247,247,1);
  
  .view_bottom_content{
    padding: 1px 10px 10px 30px;
    display: flex;
    display: -webkit-flex;
    justify-content: space-between;
    align-items: flex-start;
    div{

      &:nth-child(1) {
        padding-top: 10px;
      }
    }
    span{
      display: inline-block;
      font-size: 13PX;
      width: 100%;
      line-height: 18PX;
      cursor: pointer;
    }
    p{
      line-height: 14PX;
    }
    .line{
      border-bottom: 1PX dashed #333;
      margin: 5px 0;
    }
    img{
      width: 200PX;
    }
  }
  .email_bottom{
    background-color: rgba(194,194,194,1);
    display: flex;
    display: -webkit-flex;
    justify-content: space-between;
    align-items: center;
    overflow: hidden;
    padding: 0 10px;
    span{
    
    }
    .span{
     font-size: 10PX;
        font-weight: bold;
        margin-right: 6px;
    }
    .span_txt{
font-size: 10PX;
  color: #666;

    }
    ::v-deep(.anticon){
      margin-right: 2PX;
      svg{
        font-size: 10PX;
        
      }
    }
  }
}
</style>